.container{
  width: 98%;
  height: 96%;
}
.map-container{
  height: 100%;
  width: 100%;
  padding: 0;
  display: flex;
  flex-direction: row;

}
.tree-content{
  width: 90%;
  height:97%;
  //background-color: white;
  position: absolute;
  padding: 0;
  opacity: 1;
  z-index: 1;
}
.treeandlegend-content{

  display: flex;
  flex-direction: row;
}
.legend-content{

  height:7%;
  background-color:#0597b4 ;
  position: absolute;
  padding: 0;
  opacity: 1;
  z-index: 1;
  left: 18%;
  top: 90%;
}
.legend-pic{
  width: 600px;
  height: 500px;
}
.legend-desc{
  font-size: 20px;
  color: white;
}
.legend-info{
  height: 300px;
  overflow: auto;
  display: flex;
  flex-direction: column;


}
.legend-info-title{
  font-weight: bolder;
  font-size: 22px;
  color: #0f0756;
}
.legend-info-style{
  display: flex;
  flex-direction:row;
  margin-top: 5px;
}
.legend-info-style-block{
  width: 40px;
  height: 20px;
  margin-left: 5px;
}
.legend-info-style-desc{
  width: 95%;
  height: 20px;
  font-size: 14px;
  font-weight: bold;
  margin-left: 20px;
  color: #0f0756;
  overflow: hidden ;
}
.filter-tree{
  left: 10px;
  color: #00b8ff;
  background-color: rgba(76, 245, 255, 0);
  height:94.5%;
}
.filter-condition{
  left: 10px;
  height:5.5%;
}
.drawrow-content{
  //width: 25%;
  //height:15%;
  position: absolute;
  padding: 0;
  opacity: 1;
  z-index: 1;
  right: 1%;
  bottom: 2%;
  background: transparent;
  color: white;
  border: 0;
  transition: opacity 100ms ease-in;
  display: flex;
  flex-direction: column;
  overflow: auto;
}
.selectaddress-content{
  position: absolute;
  padding: 0;
  opacity: 1;
  z-index: 0;
  right: 6%;
  bottom: 7%;
  background: white;
}
.wrap{
  background-color: transparent;
}
